<template>
  <div class="wrap-root">
    <div class="wrap-top"></div>
    <div class="wrap-center">

      <div class="login-form">
        <span class="title">用户登录</span>

        <el-input class="username" v-model="username" placeholder="用户名" prefix-icon="el-icon-user"></el-input>

        <el-input class="password" v-model="password" placeholder="密码" show-password prefix-icon="el-icon-lock">
        </el-input>

        <el-input class="verifyCode" v-model="inputcode" placeholder="验证码" maxlength="4" prefix-icon="el-icon-s-check">
        </el-input>

        <div class="genCode" @click="changeCode()">
          <identify :identifyCode="code"></identify>
        </div>

        <div>
          <el-button class="button" type="primary" @click="transtosystem('/system')">登录</el-button>
        </div>

      </div>
    </div>
    <div class="wrap-bottom"></div>
  </div>
</template>

<script>
import identify from "../components/SIdentify"

export default {
  name: 'login',
  data: function () {
    return {
      username: '',
      password: '',
      inputcode: '',
      code: '',
      codes: '123456789abcdefghjkmnpqrstuvwxyz',
    }
  },
  mounted() {
    // 刷新页面就生成随机验证码
    this.code = ''
    this.makeCode(this.codes, 4)
  },
  methods:{
      transtosystem(url){
          this.$router.push(url)
      },
      // 点击验证码刷新验证码
      changeCode() {
        this.code = ''
        this.makeCode(this.codes, 4)
      },
      // 生成一个随机整数  randomNum(0, 10) 0 到 10 的随机整数， 包含 0 和 10
      randomNum(min, max) {
        max = max + 1
        return Math.floor(Math.random() * (max - min) + min)
      },
      // 随机生成验证码字符串
      makeCode(data, len) {
        for (let i = 0; i < len; i++) {
          this.code += data[this.randomNum(0, data.length - 1)]
        }
      }
  },
    components: {
    identify
  },
};
</script>

<style>
.wrap-root{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('../assets/background.jpg');
    background-size: 100%;
}

.wrap-top {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 150px;
}

.wrap-center {
  position: absolute;
  width: 100%;
  top: 150px;
  bottom: 100px;
}

.wrap-bottom {
  position: absolute;

  width: 100%;
  height: 100px;
  bottom: 0%;
}

.login-form {
  position: absolute;
  padding-top: 30px;
  border-radius: 5px;
  left: 70%;
  width: 380px;
  height: 280px;
  background-color: rgb(48, 65, 86);
  opacity: 0.7;
}

.title {
  position: relative;
  color: white;
  font-size: 200%;

  margin-left: 130px;
}

.username {
  position: relative;

  margin-top: 10px;
  margin-left: 40px;
  width: 300px;
}

.password {
  position: relative;

  margin-top: 10px;
  margin-left: 40px;
  width: 300px;
}

.verifyCode {
  position: relative;

  margin-top: 10px;
  margin-left: 40px;
  width: 200px;
}

.genCode {
  font-size: 150%;
  background-color: red;
  position: relative;
  
  width: 90px;
  height: 40px;

  float: right;
  margin-top: 10px;
  margin-right: 40px;

  border-radius: 5px;
}

.button {
  position: relative;

  margin-top: 10px;
  margin-left: 150px;
}
</style>